<template>
  <!-- Vue3组件不再需要根标签 -->
  <p class="title">{{ num }}</p>
  <button @click="update">更新</button>

  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
  </ul>
  <button @click="add">新增</button>
</template>

<script lang="ts">
export default {
  name: "App",
  data() {
    // Vue3 data只能写函数形式
    /*
      Vue2和Vue3的响应式原理不一样
        Vue2响应式：Object.defineProperty
          vue2新增属性数据，不是响应式
          要想新增属性数据是响应式，需要使用$set方法

          例如：
            data() { return { person: { name: 'jack' } } }
            methods: {
              update() {
                // this.person.age = 18; // 新增属性数据，不是响应式
                this.$set(this.person, 'age', 18);  // 新增属性数据，是响应式
              }
            }

        Vue3响应式：new Proxy(xxx, { get() {}, set() {} })
          原有属性和新增属性都会是响应式
            Vue3删除了$set,$delete
    */
    return {
      num: 0,
      person: {
        name: "jack",
        // age: 0
      },
    };
  },
  methods: {
    update() {
      this.num++;
    },
    add() {
      // ts报错不会影响程序的运行
      this.person.age = 18;
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 30px;
}
</style>
